<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字练习与考试系统-学生列表</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <style>
    div.header
    {
        width:800px;
        margin:0 auto;
        text-align: center;
    }

    /* ul li以横排显示 */
    div.menu
    {
        width:100%;
        float:left;
        background-color: #465c71; /* 背景色 */
        text-align:center;
        margin-bottom:10px;
    }
    /* 所有class为menu的div中的ul样式 */
    div.menu ul
    {
        list-style:none; /* 去掉ul前面的符号 */
        margin:0 auto; /* 与外界元素的距离为0 */
        padding: 0px; /* 与内部元素的距离为0 */
        width: 400px; /* 宽度根据元素内容调整 */
        float:center;
    }
    /* 所有class为menu的div中的ul中的li样式 */
    div.menu ul li
    {
        float:left; /* 向左漂移，将竖排变为横排 */
    }
    /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
    div.menu ul li a, div.menu ul li a:visited
    {
        background-color: #465c71; /* 背景色 */
        border: 1px #4e667d solid; /* 边框 */
        color: #dde4ec; /* 文字颜色 */
        display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
        line-height: 1.35em; /* 行高 */
        padding: 4px 20px; /* 内部填充的距离 */
        text-decoration: none; /* 不显示超链接下划线 */
        white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
    }
    /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
    div.menu ul li a:hover
    {
        background-color: #bfcbd6; /* 背景色 */
        color: #465c71; /* 文字颜色 */
        text-decoration: none; /* 不显示超链接下划线 */
    }
    /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
    div.menu ul li a:active
    {
        background-color: #465c71; /* 背景色 */
        color: #cfdbe6; /* 文字颜色 */
        text-decoration: none; /* 不显示超链接下划线 */
    }


    footer{
        width: 100%;
        height:50px;   /* footer的高度一定要是固定值*/
        position:absolute;
        bottom:10px;
        left:0px;
        background: #333;
        text-align:center;
        margin : 10px;
    }
    </style>
    <th:block th:include="include :: header('成绩列表')" />
</head>
<!-- oncontextmenu="return false" -->
<body class="gray-bg">
<div id="app">
    <div class="header"><a href="/"><h1>打字练习与考试系统</h1></a></div>
    <div class="menu">
        <ul>
            <li><a href="/">练习</a></li>
            <li><a href="/exam">考试</a></li>
            <li><a href="/status">状态</a></li>
            <li><a href="/paiming">排名</a></li>
            <li><a href="/student" style="background-color:red">学生</a></li>
        </ul>
    </div>
    <div class="content">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>学号：</label>
                            <input type="text" name="xuehao"/>
                        </li>
                        <li>
                            <label>姓名：</label>
                            <input type="text" name="name"/>
                        </li>
                        <li>
                            <label>英文打字速度：</label>
                            <input type="text" name="enSpeed"/>
                        </li>
                        <li>
                            <label>英文打字准确率：</label>
                            <input type="text" name="enAccuracy"/>
                        </li>
                        <li>
                            <label>英文打字退格：</label>
                            <input type="text" name="enBackspace"/>
                        </li>
                        <li>
                            <label>英文打字成绩：</label>
                            <input type="text" name="enScore"/>
                        </li>
                        <li>
                            <label>中文打字速度：</label>
                            <input type="text" name="chsSpeed"/>
                        </li>
                        <li>
                            <label>中文打字准确率：</label>
                            <input type="text" name="chsAccuracy"/>
                        </li>
                        <li>
                            <label>中文打字退格：</label>
                            <input type="text" name="chsBackspace"/>
                        </li>
                        <li>
                            <label>中文打字成绩：</label>
                            <input type="text" name="chsScore"/>
                        </li>
                        <li>
                            <label>年级：</label>
                            <input type="text" name="nianji"/>
                        </li>
                        <li>
                            <label>班级：</label>
                            <input type="text" name="banji"/>
                        </li>
                        <li>
                            <label>学校：</label>
                            <input type="text" name="school"/>
                        </li>
                        <li>
                            <label>集团校：</label>
                            <input type="text" name="jituanxiao"/>
                        </li>
                        <li>
                            <label>教育局：</label>
                            <input type="text" name="jiaoyuju"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
        <!-- <table class="table table-bordered">
            <tr>
                <td>速度</td>
                <td>准确率</td>
                <td>成绩</td>
                <td>姓名</td>
            </tr>
            <tr v-for="score in scorees">
                <td>{{score.speed}}</td>
                <td>{{score.accuracy}}</td>
                <td>{{score.score}}</td>
                <td>{{score.name}}</td>
            </tr>
        </table> -->
    </div>
</div>

<!--    <footer>-->
<!--        <a href="/login">登录</a>-->
<!--    </footer>-->

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>

<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>

<th:block th:include="include :: footer" />

<script type="text/javascript">
    // var app = new Vue({
    //   el: '#app',
    //   data: {
    //     scorees:[]
    //   },
    //   mounted:function(){
    //     //this.list();
    //   },
    //   methods:{
    //     list:function(){
    //         var _this = this;
    //         axios.post('/listPaiming',{
    //             params:{orderByColumn: "score_id",isAsc: "desc"}
    //             }).then(function(res){
    //                 res.data.rows.forEach((item)=>{
    //                 _this.scorees.push(item);
    //             });
    //             //console.log(_this.articles);
    //         },function(){
    //             console.log('请求失败处理');
    //         });
    //     },
    //   }
    // })

    $(function() {
        var options = {
            url: "/listStudent",
            modalName: "学生列表",
            sortName: "score",
            sortOrder: "desc",
            // pageSize: 20,
            columns: [{
                checkbox: false
            },
            {
                field: 'studentId',
                title: '学生id',
                visible: false
            },
            {
                field: 'xuehao',
                title: '学号'
            },
            {
                field: 'name',
                title: '姓名'
            },
            {
                field: 'speed',
                title: '速度'
            },
            {
                field: 'accuracy',
                title: '准确率'
            },
            {
                field: 'score',
                title: '成绩'
            },
            {
                field: 'examSpeed',
                title: '考试速度'
            },
            {
                field: 'examAccuracy',
                title: '考试准确率'
            },
            {
                field: 'examScore',
                title: '考试成绩'
            },
            {
                field: 'nianji',
                title: '年级'
            },
            {
                field: 'banji',
                title: '班级'
            },
            {
                field: 'school',
                title: '学校'
            },
            {
                field: 'jituanxiao',
                title: '集团校'
            },
            {
                field: 'jiaoyuju',
                title: '教育局'
            }]
        };
        $.table.init(options);
    });
</script>

</body>
</html>
